<template>
  <div class="MonitorRemoetControl">
    <!-- <affix label="远程桌面控制监控并发上限数"></affix>
    <div class="totalCount">
      <span class="font16" style="margin-right: 20px">远程桌面控制购买数量 {{totalCount}} ，当前可用 {{concurrtCount}}</span>
      <el-button type="primary" class="primary_btn" @click.stop="showWarningConfig = true">预警设置</el-button>
    </div>
    <div class="connCount font14">
      <span style="margin-right: 200px">当前发起远程连接数：{{connCount}}</span>
      <span>{{$t('monitor.remoteControlFailedDetails')}}： <span class="failed" @click="showFailedList">{{FailedCount}}</span></span>
    </div> -->
    <affix label="远程连接监控"></affix>
    <el-table :data="tableData" 
              size="mini"
              stripe>
        <el-table-column
          v-for="(item, index) in headOptions.Config"
          :prop="item.name"
          :key="index"
          :label="item.displayname"
          sortable
          ></el-table-column>
    </el-table>
    <!-- <report-table ref="monitorTable" :data="tableData" :config="headOptions.Config"></report-table> -->
    <!-- <el-dialog :close-on-click-modal="true" modal-append-to-body lock-scroll top="10%" :title="$t('monitor.remoteControlFailedDetails')" :visible.sync="showFailedDialog" width="30%">
        <el-table :data="FailedList">
          <el-table-column property="createTime" :label="$t('public.time')" width="150"></el-table-column>
          <el-table-column property="dest" :label="$t('monitor.remoteControlDetails')"></el-table-column>
        </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" class="primary_btn" @click="showFailedDialog = false">{{$t('public.confirm')}}</el-button>
      </span>
    </el-dialog> -->
    <!-- <el-dialog title="预警设置" :visible.sync="showWarningConfig">
      <div class="font14">
        <span style="margin-right: 10px">当座席同时使用远程连接数量达到</span>
        <el-input size="mini" style="width: 65px" v-model="connMax"></el-input>
        <span style="margin-left: 10px;margin-right: 10px">个时，提醒</span>
        <el-select v-model="connMaxRemind"
                   multiple
                   filterable
                   size="mini"
                   :placeholder="$t('report.pleChoseAgent')">
          <el-option
            v-for="item in agentOptions"
            :label="item.label"
            :value="item.value"
            :key="item.value">
          </el-option>
        </el-select>
      </div>
      <p class="notes">设置的数量不可以大于最大的并发数量</p>
      <div class="font14">
        <span style="margin-right: 10px">远程控制功能超过使用上限提醒时，提醒</span>
        <el-select v-model="overMaxRemind"
                   multiple
                   filterable
                   size="mini"
                   :placeholder="$t('report.pleChoseAgent')">
          <el-option
            v-for="item in agentOptions"
            :label="item.label"
            :value="item.value"
            :key="item.value">
          </el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="primary_btn" @click="showWarningConfig = false">取 消</el-button>
        <el-button class="primary_btn" type="primary" @click="updateWarningConfig">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
  import affix from './../../ui-modules/affix/Affix.vue'
  import {getCallTimeLength} from '@/utils/m7Utils'
  import bus from '@/store/eventBus'
  export default {
    name: 'monitor-remote-control',
    components: {
      affix
    },
    data () {
      return {
        tableData: [],
        headOptions: {},
        totalCount: 0,    // 并发购买总数
        concurrtCount: 0,   // 可用并发数
        connCount: 0,   // 当前连接数
        FailedList: [],    // 连接失败信息列表
        FailedCount: 0,   // 连接失败数量
        showFailedDialog: false,
        showWarningConfig: false,
        connMax: 0, // 并发数提醒
        connMaxRemind: [],    // 并发提醒人员
        overMaxRemind: [],     // 超出上限提醒人员
        agentOptions: []
      }
    },
    methods: {
      getConnectInfo () {
        this.$store.dispatch('getRemoteControlMonitorInfo', {}).then((res) => {
          this.totalCount = res.data.totalCount
          this.concurrtCount = res.data.concurrtCount
          this.connCount = res.data.connCount
          this.FailedList = res.data.faildList || []
          this.FailedCount = res.data.faildCount
          if (this.FailedList.length > 0) {
            this.FailedList.forEach((item) => {
              item.dest = `${item.agentName}(${item.exten})发起远程连接失败`
            })
          }
        })
      },
      showFailedList () {
        this.showFailedDialog = true
      },
      updateWarningConfig () {
        if (this.connMax > this.totalCount) {
          this.$message.error('设置提醒数不能超过购买连接总数')
          return
        }
        let data = {
          connMax: this.connMax,
          connMaxRemind: this.connMaxRemind,
          overMaxRemind: this.overMaxRemind
        }
        this.$store.dispatch('saveRemoteControlCSRDic', data).then(res => {
          if (res && res.success) {
            this.$message.success('设置成功')
          }
          this.showWarningConfig = false
        })
      },
      getWarningConfig () {
        this.$store.dispatch('getRemoteControlCSRDic', {}).then(res => {
          if (res && res.success && res.data) {
            console.log(res.data)
            this.connMax = res.data.connMax || 0
            this.connMaxRemind = res.data.connMaxRemind || []
            this.overMaxRemind = res.data.overMaxRemind || []
          }
        })
      },
      getRemoteControlMonitorList () {
        this.$store.dispatch('getRemoteControlMonitorList', {}).then(res => {
          console.log(res)
          if (res.data) {
            this.tableData = res.data
            this.tableData.forEach((item) => {
              if (item.status === 'disconnect') {
                item.status = '未连接'
              } else if (item.status === 'connect') {
                item.status = '已连接'
              }
              item.serverTime = getCallTimeLength(item.serverTime, false)
            })
            this.headOptions = res.tableHeader
          }
        })
      },
      handleRemoteAssistMonitorChange (data) {
        let findIndex = this.tableData.findIndex(item => { return item._id === data._id })
        let findItem = this.tableData[findIndex]
        if (!findItem) {
          return
        }
        let item = {
          '_id': findItem._id,
          'displayName': findItem.displayName,
          'exten': findItem.exten,
          'agentName': findItem.agentName,
          'serverTime': findItem.serverTime,
          'serverCount': findItem.serverCount,
          'status': '',
          'lastTime': findItem.lastTime
        }
        if (data.status === 'connect') {
          item.lastTime = data.lastTime
          item.status = '已连接'
          item.serverCount += 1
          this.connCount += 1
        } else if (data.status === 'disconnect') {
          item.status = '未连接'
          let totalTime = item.serverTime.split(':')[0] * 3600 + item.serverTime.split(':')[1] * 60 + item.serverTime.split(':')[2] * 1
          totalTime += data.serverTime
          item.serverTime = getCallTimeLength(totalTime, false)
          this.connCount = this.connCount - 1
        }
        this.tableData.splice(findIndex, 1, item)
      }
    },
    activated () {
    },
    mounted () {
      // this.getConnectInfo()
      // this.getWarningConfig()
      this.getRemoteControlMonitorList()
      bus.$on('RemoteAssistMonitorChange', this.handleRemoteAssistMonitorChange)
    },
    beforeMount () {
      this.$store.dispatch('getCache', { type: 'agents' }).then(agents => {
        this.agentOptions = agents.map(agent => ({ label: `${agent.displayName}[${agent.exten}]`, value: agent._id }))
      })
    },
    beforeDestroy () {
      bus.$off('RemoteAssistMonitorChange', this.handleRemoteAssistMonitorChange)
    }
  }
</script>

<style lang="stylus" scoped>
  @import '../../../assets/common.styl';
  .MonitorRemoetControl
    padding 20px
    .ui-affix
      padding-bottom 0
    .notes
      margin 10px 0
      color $cf-level2
    .totalCount
      margin 10px
    .connCount
      margin 10px
      padding 15px 30px
      border 1px solid $cf-level4
      margin-bottom 25px
      .failed
        cursor: pointer
        color $c-main
</style>
